<!-- 登录页 -->
<script lang="ts" setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useInfoStore } from '../../stores/userInfo'
import { LoginData } from '../../types/loginInterface'

const userInfo = useInfoStore()
const formState = reactive({
  username: '',
  password: '',
  remember: true,
})
const router = useRouter()

/**
 *提交表单数据验证成功回调
 */
const onFinish = async (values: any) => {
  let data: LoginData = {
    userName: values.username,
    userPass: values.password,
  }
  await userInfo.userLogin(data)
}
/**
 * 提交表单数据验证失败回调
 */
const onFinishFailed = (values: any) => {
  console.log(`onFinishFailed:${values}`)
}
</script>

<template>
  <div class="login-content">
    <div class="info-btn">
      <div class="logo"></div>
      <p>账号：admin;密码：123456</p>
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="Username"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item
          label="Password"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
          <a-checkbox v-model:checked="formState.remember"
            >Remember me</a-checkbox
          >
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: url('../../assets/img/bg@3x.png') no-repeat;
  background-size: 100% 100%;
  .info-btn {
    width: 424px;
    height: 404px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08),
      0px 2px 10px 0px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .logo {
      width: 214px;
      height: 54px;
      // border: 1px solid salmon;
      margin-bottom: 20px;
    }
  }
}
</style>
